<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('充值')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="main">

				<view class="list">
					<view class="left">
						<view class="img">
							<image src="../../static/menu/menu12.png" mode="widthFix"></image>
						</view>
						<view class="name">{{array[type-1]}}</view>
					</view>
				</view>

			</view>
			<view class="address">{{Lang.lang('充值地址')}}:{{bsc_info.bsc_recharge_address}}</view>
			<!-- <input  type="text" v-model="value" placeholder="" style="background-color: aliceblue;" /> -->

			<view class="details_box">
				<view class="list">
					<input type="text" value="" v-model="value" />
				</view>


			</view>

			<view class="copy" @click="recharge()">{{Lang.lang('充值')}}</view>
		</view>



	</view>
</template>

<script>
	import Web3 from 'web3';
	export default {
		data() {
			return {
				type: 0,
				lang: 'en',
				langIndex: '',
				scrrol: false,
				info: '',
				index: 0,
				array: ['USDT', 'YYDM'],
				value: 0,
				user_wallet: [],
				wallet: '',
				//===========================
				bsc_info: {

				},
				coin_info: {

				},
			}
		},
		onLoad(options) {
			this.type = options.type || 0
			this.loadData();
		},
		onShow() {

		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/user/getBscConfig', {}, res => {
					if (res.code == 200) {
						that.bsc_info = res.data.bsc_info
						that.coin_info = res.data.coin_info
					}
				});
			},
			async recharge() {
				let that = this
				let network = ethereum.networkVersion;
				let contractAddress = ''
				if (network != 56) {
					return;
				}
				if (that.value == 0) {
					that.Msg.Fail(that.Lang.lang('充值金額錯誤'));
					return;
				}
				if (that.type == 1) {
					contractAddress = that.coin_info.USDT.contract_address
				} else {
					contractAddress = that.coin_info.YYDM.contract_address
				}
				let web3 = new Web3(window.ethereum);
				let accounts = await web3.eth.getAccounts();
				let from = accounts[0];
				let abi = JSON.parse(that.bsc_info.erc20_abi)
				let contract = new web3.eth.Contract(abi, contractAddress);
				let value = web3.utils.toWei(this.value, 'ether');
				let to = that.bsc_info.bsc_recharge_address

				let gasPrice = await web3.eth.getGasPrice()
				contract.methods.transfer(to, value).send({
					from: from,
					gas: 210000,
					gasPrice: gasPrice * 1.5,
				}, function(error, result) {
					if (error) {
						that.Msg.Fail(that.Lang.lang('充值錯誤'));
					} else {
						that.Msg.Success(that.Lang.lang('充值成功'));
					}
				});

			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.main {
		width: 100%;
		margin: auto;
		margin-top: 4%;
	}

	.main .title {
		color: #000;
		font-size: 3.5vw;
		font-weight: bold;
		margin-bottom: 3vw;
	}

	.main .list {
		background-color: #1A1A1A;
		height: 14vw;
		line-height: 14vw;
		display: flex;
		justify-content: space-between;
		padding: 0vw 3vw;
		border-radius: 3vw;
		margin-bottom: 3vw;
		width: 50%;
		margin: auto;
	}

	.main .list .left {
		display: flex;
	}

	.main .list .img {
		width: 7vw;
		margin-top: 2vw;
	}

	.main .list .img image {
		width: 100%;
	}

	.main .list .huo {
		color: #0ef0ec;
		font-size: 7vw;
	}

	.main .list .name {
		color: #fff;
		font-size: 4vw;
		margin-left: 3vw;
	}

	.main .list .arrow {
		color: #fff;
		font-size: 4vw;
	}

	.code {
		width: 60%;
		margin: 8vw auto;
		border: 1px solid #0155FF;
		padding: 7vw;
		border-radius: 4vw;
	}

	.code image {
		width: 100%;
	}

	.address {
		width: 80%;
		color: #fff;
		font-size: 3.5vw;
		font-weight: bold;
		margin: auto;
		word-break: break-all;
		margin-top: 4vw;
	}

	.copy {
		background-color: #0155FF;
		width: 60%;
		height: 13vw;
		line-height: 13vw;
		border-radius: 2vw;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		margin: 7vw auto 0vw;
		font-weight: bold;
	}

	.details_box {
		width: 80%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
	}

	.details_boxNo {
		padding: 0vw 4%;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.details_box .input_box {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}

	.details_box .input_box .m {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}

	.details_box .input_box input {
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}

	.details_box .list {
		width: 100%;
		padding: 5vw 3vw;
		display: flex;
		align-items: center;
		position: relative;
	}

	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}

	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.details_box .list .text .i {
		width: 5vw;
		margin-right: 1vw;
	}

	.details_box .list .text .i image {
		width: 100%;
	}

	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: left;
		font-weight: bold;
	}

	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}

	.details_box .list .yzm {
		font-size: 3.5vw;
		color: #FC5D20;
		font-weight: bold;
		outline: none;
		background-color: transparent !important;
		border-radius: 10vw;
		height: 10vw;
		border: 1px solid #FC5D20;
	}

	.standing {
		width: 100%;
	}

	.standing image {
		width: 100%;
	}

	.standing .text {
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}

	.details_box .standing:nth-child(2) {
		margin-top: 5vw;
	}
</style>